<template>
  <div>
    <el-tabs v-model="activeName" @click="putData1">
      <el-tab-pane label="移通要闻" name="first">
        <h3>标题</h3>
        <el-input
          type="text"
          placeholder="请输入文章标题"
          v-model="title1"
          maxlength="30"
          show-word-limit
        >
        </el-input>
        <h3>正文</h3>
        <el-tiptap
          width="100%"
          height="500"
          lang="zh"
          v-model="content1"
          placeholder="请输入移通要闻类的文章..."
          :extensions="extensions"
        />
        <el-button type="primary" @click="open(1)" round>发布文章</el-button>
      </el-tab-pane>
      <el-tab-pane label="移通快讯" name="second">
        <h3>标题</h3>
        <el-input
          type="text"
          placeholder="请输入文章标题"
          v-model="title2"
          maxlength="30"
          show-word-limit
        >
        </el-input>
        <h3>正文</h3>
        <el-tiptap
          height="500"
          lang="zh"
          v-model="content2"
          placeholder="请输入移通快讯类的文章..."
          :extensions="extensions"
        />
        <el-button type="primary" @click="open(2)" round>发布文章</el-button>
      </el-tab-pane>
      <el-tab-pane label="移通故事" name="third">
        <h3>标题</h3>
        <el-input
          type="text"
          placeholder="请输入文章标题"
          v-model="title3"
          maxlength="30"
          show-word-limit
        >
        </el-input>
        <h3>正文</h3>
        <el-tiptap
          height="500"
          lang="zh"
          v-model="content3"
          placeholder="请输入移通故事类的文章..."
          :extensions="extensions"
        />
        <el-button type="primary" @click="open(3)" round>发布文章</el-button>
      </el-tab-pane>
      <el-tab-pane label="通知通告" name="fourth">
        <h3>标题</h3>
        <el-input
          type="text"
          placeholder="请输入文章标题"
          v-model="title4"
          maxlength="30"
          show-word-limit
        >
        </el-input>
        <h3>正文</h3>
        <el-tiptap
          height="500"
          lang="zh"
          v-model="content4"
          placeholder="请输入通知通告类的文章..."
          :extensions="extensions"
        />
        <el-button type="primary" @click="open(4)" round>发布文章</el-button>
      </el-tab-pane>
      <el-tab-pane label="信息公开" name="fifth">
        <h3>标题</h3>
        <el-input
          type="text"
          placeholder="请输入文章标题"
          v-model="title5"
          maxlength="30"
          show-word-limit
        >
        </el-input>
        <h3>正文</h3>
        <el-tiptap
          height="500"
          lang="zh"
          v-model="content5"
          placeholder="请输入信息公开类的文章..."
          :extensions="extensions"
        />
        <el-button type="primary" @click="open(5)" round>发布文章</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  // 需要的 extensions
  Doc,
  Text,
  Paragraph,
  Image, //图片
  Heading, //标题
  Bold, //加粗
  Underline, //下划线
  Italic, //斜体
  Strike, //中划线
  TextAlign, //文字对齐方式
  Indent, //缩进
  LineHeight, //行高
  HorizontalRule, //水平分割线
  HardBreak,
  TrailingNode,
  History, //撤退/重做
  Table, // 表格(与 TableHeader, TableCell, TableRow 一起使用)
  TableHeader,
  TableCell,
  TableRow,
  FormatClear, //清除格式
  TextColor, //文本颜色
  TextHighlight, //高亮
  Preview, //预览
  Fullscreen, //全屏
  SelectAll, //全选
  FontType, //字体
  // FontSize, //大小
} from "element-tiptap";

export default {
  data() {
    // 编辑器的 extensions
    // 它们将会按照你声明的顺序被添加到菜单栏和气泡菜单中
    return {
      extensions: [
        new Image(),
        new Doc(),
        new Text(),
        new Paragraph(),
        new History(), //撤销 重做
        new Heading({ level: 5 }), //标题
        new Bold(), //加粗
        new FontType(), //字体
        // new FontSize(), //字号
        new TextColor(), //文本颜色
        new TextHighlight(), //文本高亮
        new Underline(), //下划线
        new Italic(), //斜体
        new Strike(), //中划线
        new TextAlign(), //文字对齐方式
        new Indent(), //缩进
        new LineHeight(), //行距
        new HorizontalRule(), //分割线
        new HardBreak(),
        new TrailingNode(),
        new Table(), //表格
        new TableHeader(),
        new TableCell(),
        new TableRow(),
        new FormatClear(), //清除格式
        new Preview(), //预览
        new Fullscreen(), //全屏
        new SelectAll(), //全选
      ],
      // 编辑器的内容
      content1: "", // 移通要闻文章
      content2: "", // 移通快讯文章
      content3: "", // 移通故事文章
      content4: "", // 通知通告文章
      content5: "", // 信息公开文章
      activeName: "first", //导航默认选中项
      title1: "", // 移通要闻文章标题
      title2: "", // 移通快讯文章标题
      title3: "", // 移通故事文章标题
      title4: "", // 通知通告文章标题
      title5: "", // 信息公开文章标题
    };
  },
  methods: {
    open(num) {
      // console.log(num)
      this.$confirm("即将发布文章,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //确认的回调函数
          if (num == 1) {
            this.putData1();
            // 清空输入文章
            this.content1 = "";
          }
          if (num == 2) {
            this.putData2();
            // 清空输入文章
            this.content2 = "";
          }
          if (num == 3) {
            this.putData3();
            // 清空输入文章
            this.content3 = "";
          }
          if (num == 4) {
            this.putData4();
            // 清空输入文章
            this.content4 = "";
          }
          if (num == 5) {
            this.putData5();
            // 清空输入文章
            this.content5 = "";
          }
          this.$message({
            type: "success",
            message: "文章发布成功!",
          });
        })
        .catch(() => {
          //取消的回调函数
          this.$message({
            type: "info",
            message: "已取消发布",
          });
        });
    },
    putData1() {
      //发布文章
      // console.log(this.content1);
      let params = `content=${this.content1}&category_id=1&title=${this.title1}`;
      this.axios.post("/admin/send", params).then((res) => {
        console.log(res);
      });
    },
    putData2() {
      //发布文章
      // console.log(this.content2);
      let params = `content=${this.content2}&category_id=2&title=${this.title2}`;
      this.axios.post("/admin/send", params).then((res) => {
        // console.log(res);
      });
    },
    putData3() {
      //发布文章
      // console.log(this.content3);
      let params = `content=${this.content3}&category_id=3&title=${this.title3}`;
      this.axios.post("/admin/send", params).then((res) => {
        // console.log(res);
      });
    },
    putData4() {
      //发布文章
      // console.log(this.content4);
      let params = `content=${this.content4}&category_id=4&title=${this.title4}`;
      this.axios.post("/admin/send", params).then((res) => {
        // console.log(res);
      });
    },
    putData5() {
      //发布文章
      // console.log(this.content5);
      let params = `content=${this.content5}&category_id=5&title=${this.title1}`;
      this.axios.post("/admin/send", params).then((res) => {
        // console.log(res);
      });
    },
  },
};
</script>
